<template>
	<view class="select-add-components-page">
		<scroll-view scroll-y="true" class="scroll">
			
			<add-component-cell class="c-cell" :h="40" @click="chose('gifts', 'gifts')">
				<gifts :start_scale="0.5" stop_here example/>
			</add-component-cell>
			
			<add-component-cell class="c-cell" :h="105" @click="chose('gifts', 'gifts_vertical')">
				<gifts-vertical :start_scale="0.4" stop_here example/>
			</add-component-cell>
			
			<add-component-cell class="c-cell" :h="62" @click="chose('blood_bar', 'blood_bar')">
				<blood-bar :start_scale="0.5" stop_here example/>
			</add-component-cell>
			
			<add-component-cell class="c-cell" :h="32" @click="chose('blood_bar', 'blood_sin')">
				<blood-sin :start_scale="0.4" stop_here/>
			</add-component-cell>
			
			<add-component-cell class="c-cell" :h="122" @click="chose('rank', 'rank')">
				<rank :start_scale="0.4" stop_here/>
			</add-component-cell>
			
		</scroll-view>
	</view>
</template>

<script>
	
	import gifts from '@/components/gifts/gifts.vue'
	import giftsVertical from '@/components/gifts-vertical/gifts-vertical.vue'
	import bloodBar from '@/components/blood-bar/blood-bar.vue'
	import bloodSin from '@/components/blood-sin/blood-sin.vue'
	import rank from '@/components/rank/rank.vue'
	import addComponentCell from '@/components/add-component-cell/add-component-cell.vue'
	
	export default {
		components: {
			gifts,
			giftsVertical,
			bloodBar,
			bloodSin,
			rank,
			addComponentCell
		},
		data() {
			return {
				
			}
		},
		methods: {
			
			chose(tableName, style) {
				window.electronAPI.addComponent(tableName, style)
			}
		}
	}
</script>

<style scoped>
	
	.select-add-components-page {
		background-color: #0e0e11;
		width: 100%;
		height: 100vh;
	}
	
	.scroll {
		width: 100%;
		height: 100%;
	}
	
	.c-cell {
		margin: 10px 10px 0 10px;
	}
	
	::v-deep ::-webkit-scrollbar {
	  display: block !important; /* 强制显示滚动条 */
	  width: 4px;                /* 滚动条的宽度 */
	  height: 4px;              /* 滚动条的高度 */
	}
	
	::v-deep ::-webkit-scrollbar-thumb {
	  background-color: #49495a;   /* 滚动条滑块的颜色 */
	  border-radius: 2px;      /* 滚动条滑块的圆角 */
	}
	
	::v-deep ::-webkit-scrollbar-track {
	  background-color: #272730; /* 滚动条轨道的颜色 */
	  border-radius: 10px;       /* 滚动条轨道的圆角 */
	}

</style>
